import { rules } from "./formRules";
/**
 * @description 表格配置
 * @param 其余参数参考elementPlus table
 * @param {String} type 类型：input输入框，select下拉框，number数字，date时间
 * @param {Boolean} required 是否必填，默认false
 * @param {Array} option 下拉选项，选择器和树结构需要
 * @param {Object} optionConfig 下拉选项对象集合，在组件中传入{xxx: []}
 * @param {Boolean|String} disabled 为字符串时，disabledConfig和disabledKeys必须存在一个，如果都存在则互相对比，相同值则禁用
 * @param {String} disabledKeys 禁用对比字段：转递当前行需要对比字段key
 * @param {Object} disabledConfig 在组件中传入的disabledConfig对象，用于对比disabledKeys或其他值
 * @param {String} slotName 自定义插槽名称
 * @param {String} slotForm 自定义插槽名称，el-form-item标签包裹
 */

// form/query配置，使用的key作为唯一，表格是prop
export const form = [
  {
    width: "100%",
    key: "name",
    label: "用户名",
    type: "input",
    required: true,
    colSpan: 8,
  },
  {
    width: "100%",
    key: "phone",
    label: "手机号",
    type: "input",
    rules: rules["phone"],
    colSpan: 8,
  },
  {
    width: "100%",
    key: "select",
    label: "选择器",
    type: "select",
    option: [{ id: 1, label: "天河区" }],
    required: true,
    colSpan: 8,
    // 简单的处理
    change: (data) => {
      data.name = undefined;
      data.phone = undefined;
    },
  },
  {
    width: "100%",
    key: "selectSearch",
    label: "搜索选择器",
    type: "select",
    filterable: true,
    option: [{ id: 1, label: "白云区" }],
    colSpan: 12,
  },
  {
    key: "cascader",
    label: "级联选择器",
    type: "cascader",
    option: [
      {
        id: 1,
        label: "广州",
        children: [
          {
            id: 11,
            label: "天河区",
          },
        ],
      },
      {
        id: 2,
        label: "湖南",
      },
    ],
    params: {
      name: "label", // 赋值name = label
    },
    colSpan: 12,
  },
  {
    key: "date",
    label: "时间",
    type: "date",
  },
  {
    key: "datetime",
    label: "时分秒",
    type: "datetime",
    colSpan: 12,
  },
  {
    key: "daterange",
    label: "日期区间",
    type: "daterange",
    colSpan: 12,
    params: ["start", "end"],
  },
  {
    key: "customize",
    label: "自定义",
    // type: "input",
    slotName: "customize",
  },
];

// 添加行
export const table = {
  propList: [
    {
      width: 150,
      label: "用户名",
      prop: "name",
      type: "input",
      required: true,
      disabled: "name", // 组件中传入的disabledConfig对象书写方式
    },
    {
      width: 150,
      label: "年龄",
      prop: "age",
      type: "input",
      disabled: "age",
      disabledKeys: "ages", // 需要跟ages字段对比，不相等则禁用
    },
    {
      width: 150,
      label: "年龄2",
      prop: "ages",
      type: "input",
      disabled: "ages", // 组件中传入的disabledConfig对象书写方式
      disabledKeys: "id", // 需要跟id字段对比，不相等则禁用
    },
    {
      width: 200,
      prop: "requiredDisabled",
      label: "测试效验/禁用",
      type: "input",
      p: "用户名输入123开启",
      required: ({ row }) => row.name === "123",
      disabled: ({ row }) => row.name !== "123",
    },
    {
      width: 200,
      prop: "number",
      label: "数字",
      type: "number",
    },
    {
      width: 200,
      prop: "select",
      label: "选择器",
      type: "select",
      option: [
        { label: "选项1", id: 1 },
        { label: "选项2", id: 2 },
      ],
      required: true,
    },
    {
      width: 200,
      prop: "selectSearch",
      label: "搜索选择器",
      type: "select",
      filterable: true,
      option: [
        { label: "选项1", id: 1 },
        { label: "选项2", id: 2 },
      ],
    },
    {
      width: 200,
      label: "日期选择器",
      prop: "date",
      type: "date",
      // 日期选择器类型重写，也可在组件中传入dateConfig:{type:'date'}
      picker: "date",
    },
    {
      label: "附件",
      prop: "annex",
      slotForm: "annex",
    },
    {
      label: "操作",
      prop: "operate",
      slotForm: "operate",
      fixed: "right",
      filter: true, // 是否过滤该字段
    },
  ],
  showIndex: true,
  // 复选框
  showSelect: false,
  // 分页
  showFooter: false,
  // 是否固定序号/复选框
  showFixed: false,
};
